<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>

<html>
<head>
<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/highcharts/highcharts.js" /> "></script>
<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/highcharts/themes/grid.js" /> "></script>
<script type="text/javascript" src="<c:url value="/scripts/plugins-jquery/highcharts/modules/exporting.js" /> "></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
		
			var chart;

			function requestData() {
			     $.getJSON('comparativo_flujo?anio=2012&id_concepto='+$('#concepto').val(), 
			            function (data) {
			            	 var categorias=[];
			                 var series_presupuestado = chart.series[0];
			                 var series_ejecutado = chart.series[1];
			                 var procData = $.map(data, function(item){
			                     return [[item.mes,item.monto_presupuestado]];          
			                 });
			                 var procData2 = $.map(data, function(item){
			                     return [[item.mes,item.monto_ejecutado]];          
			                 });
			                 $.each(data, function(j){
			                	 categorias[j]=this.mes;
			         	      });
			                 series_presupuestado.setData(procData);
			                 series_ejecutado.setData(procData2);
			                 chart.xAxis[0].setCategories(categorias);
			      });
			}
							
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						defaultSeriesType: 'line',
						events: { load: requestData }
					},
					title: {
						text: 'FLUJO DE CAJA PROYECTADO VS EJECUTADO 2012'
					},
					subtitle: {
						text: 'Concepto: Materia Prima'
					},
					xAxis: {
						categories: ['ENE', 'FEB', 'MAR', 'ABR', 'MAY', 'JUN',
					                    'JUL', 'AGO', 'SET', 'OCT', 'NOV', 'DIC'],
						title: {
							text: null
						}
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Monto (soles)',
							align: 'high'
						},
						 labels: {
		                    formatter: function() {
		                        return Highcharts.numberFormat(this.value, 0);
		                    }
		                }
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.series.name +'</b><br/>'+
	                        this.x +': '+ Highcharts.numberFormat(this.y, 0,'.',',') +' soles';
						}
					},
					plotOptions: {
						line: {
							/*dataLabels: {
								enabled: true,
								formatter: function() {
									return  Highcharts.numberFormat(this.y, 0,'.',',');
								},
								align:"right"
							}*/
						}
					},
					legend: {
						/*layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: -100,
						y: 100,
						floating: true,
						borderWidth: 1,
						backgroundColor: '#FFFFFF',
						shadow: true*/
						layout: 'horizontal'/*,
		                align: 'right'/*,
		                verticalAlign: 'top'/*,
		                x: -10,
		                y: 100/*,
		                borderWidth: 0*/
					},
					credits: {
						enabled: true,
						text:"Sistema Administrativo Integrado EPS GRAU SA."
					},
			        series: [{
		                name: 'Proyectado'
		            }, {
		                name: 'Ejecutado'
		            }]
				});

				// the button action
			    $('#button').click(requestData);
				
			});
		</script>
		
</head>
<body>
		<h2 align="center">CONSULTAS Y ESTADISTICAS DE FLUJO DE CAJA</h2>
		<button id="button">Set categories</button>
		<input type="text" id="concepto" size="10" value="3">
		<!-- 3. Add the container -->
		<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

	</body>
</html>


